<template>
  <div class="pole-container">
    <!-- 搜索查询区域 --> <!-- 搜索查询区域 --> <!-- 搜索查询区域 --> <!-- 搜索查询区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称:</span>
      <el-input v-model="params.poleName" clearable placeholder="请输入内容" class="search-main" @clear="getList" />
      <span class="search-label">一体杆编号</span>
      <el-input v-model="params.poleNumber" clearable placeholder="请输入内容" class="search-main" @clear="getList" />
      <span class="search-label">运行状态：</span>
      <el-select v-model="params.poleStatus">

        <el-option label="正常" :value="0" />
        <el-option label="异常" :value="1" />
        <el-option label="全部" :value="null" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="getList">查询</el-button>
    </div>

    <div>
      <el-button class="btn" type="primary" :round="true" @click="open">添加一体杆</el-button>
      <el-button class="btn" type="danger" :round="true" @click="delMore">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <!-- 这里准备一个看不见的dialog结构 -->
      <div>
        <el-dialog :title="form.id ? '编辑一体杆' : '添加一体杆'" :visible="flag" @close="handleClose">
          <div style="display: flex; justify-content: center;">
            <el-form ref="form" :model="form" :rules="rules" style="width: 400px;">

              <el-form-item label="一体杆名称" prop="poleName">
                <el-input v-model="form.poleName" placeholder="请输入一体杆名称" />
              </el-form-item>

              <el-form-item label="一体杆编号" prop="poleNumber">
                <el-input v-model="form.poleNumber" placeholder="请输入一体杆编号" />
              </el-form-item>

              <el-form-item label="一体杆IP" prop="poleIp">
                <el-input v-model="form.poleIp" placeholder="请输入一体杆IP" />
              </el-form-item>
              <el-form-item label="关联区域ID" prop="areaId">
                <!-- 关联区域可以手动选择，不用手动输入 --><!-- 关联区域可以手动选择，不用手动输入 -->

                <el-select v-model="form.areaId" prop="areaId" placeholder="请选择关联区域">
                  <el-option v-for="item in dropList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
                </el-select>
              </el-form-item>

              <el-form-item label="一体杆类型" prop="poleType">
                <el-select v-model="form.poleType" prop="poleType" placeholder="请选择一体杆类型">
                  <el-option label="入口" value="entrance" /><!-- 添加时选择入口还是出口 -->
                  <el-option label="出口" value="export" />
                </el-select>
              </el-form-item>





              <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button @click="confirmAdd" type="primary">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!-- 显示列表信息 -->
      <el-table style="width: 100%" :data="list" @selection-change="fn2">

        <el-table-column type="selection" width="100" /><!-- 批量删除的选择 -->

        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" width="180" />
        <el-table-column label="一体杆编号" prop="poleNumber" width="120" />
        <el-table-column label="一体杆IP" width="150" prop="poleIp" />
        <el-table-column label="安装区域" width="120" prop="areaName" />
        <el-table-column label="一体杆类型" width="100" prop="poleType">
          <template #default="{ row }"><!-- 显示信息表单中的入口还是出口 -->
            {{ row.poleType === "entrance" ? "入口" : "出口" }}
          </template>
        </el-table-column>

        <el-table-column label="运行状态" prop="poleStatus">
          <template #default="scope">
            {{ formatStatus(scope.row.poleStatus) }}

          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="box">
        <el-pagination :current-page="params.page" :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPoleListAPI, addPoleAPI, editPoleAPI, delPolePI, getAreaListAPI } from '@/api/rodmanage'
export default {
  name: 'RodManage',

  data() {
    return {

      flag: false,
      total: 0,
      list: [],//data数组
      dropList: [],//areaName areaId数组


      form: {
        // id: '',
        poleName: '',//一体杆名称
        poleNumber: '',//一体杆编号
        poleIp: '',//一体杆IP
        areaId: '',//关联区域ID
        poleType: '',//一体杆类型entrance:入口,export:出口


      },
      // },
      // //校验
      rules: {
        poleName: [{ required: true, message: "一体杆名称必须填写", trigger: "blur" }],
        poleNumber: [{ required: true, message: "一体杆编号必须填写", trigger: "blur" }],
        poleIp: [{ required: true, message: "一体杆IP必须填写", trigger: "blur" }],
        areaId: [{ required: true, message: "关联区域ID必须填写", trigger: "blur" }],
        poleType: [{ required: true, message: "一体杆类型必须填写", trigger: "blur" }]
      },


      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        poleStatus: '',
      }

    }
  },

  mounted() {
    //页面加载后执行
    this.getList()
    this.getAreaIdList()//获取areaName，areaID数组

  },

  methods: {

    async getAreaIdList() {
      const res = await getAreaListAPI()
      // console.log("222", res)
      this.dropList = res.data
      console.log("666", this.dropList)
      //dropList里面有areaName，areaID
    },


    edit(row) {
      console.log(row)
      this.flag = true
      //数据回显 
      this.form.poleName = row.poleName
      this.form.poleNumber = row.poleNumber
      this.form.poleIp = row.poleIp
      this.form.areaId = row.areaId
      this.form.poleType = row.poleType
      this.form.id = row.id
      // this.form.areaName = row.areaName
    },
    fn2(val) {
      //选中项变化时触发selection-change事件
      //val就是选中项们=>选中的那一行对象数据组成的数组
      console.log(val)
      let str = ''
      for (let index = 0; index < val.length; index++) {
        const temp = val[index]
        str = str + temp.id + ','
      }
      const idStr = (str.slice(0, str.length - 1))
      this.idStr = idStr

    },


    async delMore() {
      try {
        if (await this.$confirm('你确定要删除吗？')) {
          await delPolePI(this.idStr);
          this.$message.success('删除成功');
          this.getList();
        }
      } catch (error) {
        console.error(error);
      }
    },

    async del(id) {
      try {
        if (await this.$confirm('你确定要删除吗')) {
          await delPolePI(id);
          this.$message.success('删除成功');
          this.getList();
        }
      } catch (error) {
        this.$message.error(error.response.data.msg);
      }
    },



    async confirmAdd() {
      // 新增或者添加，先判断  
      const formIsValid = await this.$refs.form.validate();

      if (formIsValid) {
        if (this.form.id) {
          console.log('编辑');
          try {
            await editPoleAPI(this.form);
            this.$message.success('编辑成功');
            this.getList();
            this.flag = false;
            this.form = {
              poleName: '',
              poleNumber: '',
              poleIp: '',
              areaId: '',
              poleType: '',
            };
          } catch (error) {
            this.$message.error(error.response.data.msg);
          }
        } else { // console.log('可以请求数据了')  
          try {
            await addPoleAPI(this.form);
            this.$message.success('添加成功');
            this.getList();
            this.flag = false;
            this.form = {
              id: '',
              poleName: '',
              poleNumber: '',
              poleIp: '',
              areaId: '',
              poleType: '',
              areaName: ''
            };
          } catch (error) {
            this.$message.error(error.response.data.msg);
          }
        }
      }
    },
    handleClose() {
      console.log('有人点×')
      this.flag = false

      this.form = {

        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: '',
      }

    },
    open() {
      this.flag = true
    },
    //翻页功能
    handleCurrentChange(page) {
      console.log('页码变了', page)
      this.params.page = page
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getList()
    },


    async getList() {
      try {
        const res = await getPoleListAPI(this.params);
        // 存数据 展示在页面  
        this.list = res.data.rows;
        this.total = res.data.total;
        console.log(this.list);
      } catch (error) {
        console.error("Error fetching the list:", error);
      }
    },
    //返回入口，出口状态

    formatStatus(poleStatus) {
      const statusMap = {
        0: '正常',
        1: '异常'
      }
      return statusMap[poleStatus]
    }
  }
}

</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.btn {
  margin: 10px;
}

.box {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>
